<template>
  <div class="mobile-container">
    <van-skeleton title avatar :row="10" :loading="!state.loading">
      <van-empty description="该条目下还没有消息"  v-if="state.list.length == 0 "/>
      <template v-if="state.list.length != 0 ">
        <van-list
            v-model="state.loading"
            :finished="state.finished"
            finished-text="没有更多了"

        >
          <template v-for="item in state.list">
            <van-cell   :title="item.title+':'+item.content" @click="readMessage(item.id,item.type,item)">
              <template v-slot:right-icon v-if="item.type==2"><van-button type="primary" @click="goToApply(item.extra.application_id,item.extra.form_id,item.id)">前往查看</van-button></template>
              <van-tag type="warning" v-if="!getStatus(item.mark_read_list,)">未读</van-tag>
            </van-cell>
          </template>
        </van-list>
      </template>
    </van-skeleton>

  </div>
</template>

<script lang="ts">
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {defineComponent,reactive} from "vue";
import {Dialog, Notify} from "vant";
import {IClub, iListNode} from "../../../../interface";
import axios, {AxiosResponse} from "axios";
import {IMarkReadListNode, IMessageRsp, IPageInfoRsp} from "@/lib/recover";
import {getAllData} from "@/lib/tools";

interface IMSGRsp{
  items:IMessageRsp[],
  page_info:IPageInfoRsp,
  total_count:number,
}
export default defineComponent({
  name: "mobile_notify_list.vue",
  model:{
    prop:'path',
    event:'change',
  },
  props:{
    path:{
      type:String,
      default:"self/received"
    },
    args:{
      type:String,
      default:'',
    }
  },
  setup(props) {
    const debug = true;
    const router = useRouter();
    const store = useStore();
    store.dispatch('getUserInfo');
    const state = reactive({
      list:[] as (IMessageRsp & {show:boolean})[],
      init : false,
      loading:false,
      finished:false,
    })
    console.log(props.path)
    getAllData<IMessageRsp>("api/message/"+props.path,0,props.args).then(data=>{
      if(debug){
        console.log(data)
      }
      for(const item of data){
        state.list.push({...item,show:true})
      }
      state.init = true;
      state.loading=true;
      state.finished=true;
    })
    if(debug){
      console.log(store.state.user.user_info)
    }

    const getStatus = function(mark_read_list:IMarkReadListNode[]){
      if(mark_read_list==null){
        return false;
      }else{
        for(const item of mark_read_list){
          if(debug){
            console.log(item.user_id+"|"+ store.state.user.user_info.id)
          }
          if( item.user_id == store.state.user.user_info.id){
            return true;
          }
        }
        return false;
      }
    }
    const goToApply = function(apply_id:number,form_id:number,message_id:number){
      let params = new URLSearchParams({
        "formid":form_id.toString(),
        "applyid":apply_id.toString()
      }).toString();
      fetch("api/message/single/"+message_id+"/read",{
        method:'POST'
      }).then(res=>{
        if(res.status >= 200 && res.status <= 300 ){
          Notify("成功阅读")
          router.push({path:"/formview",query:{
              formid:form_id,
              applyid:apply_id
            }})
        }
      })

    }
    const readMessage = function(message_id:number,type:number,item:(IMessageRsp & {show:boolean})){
      if(type!=2){
        fetch("api/message/single/"+message_id+"/read",{
          method:'POST'
        }).then(res=>{
          if(res.status >= 200 && res.status <= 300 ){
            if(item.mark_read_list==null){
              item.mark_read_list = [] as IMarkReadListNode[];
            }
            item.mark_read_list.push({
              message_id:message_id,
              user_id:store.state.user.user_info.id,
              created_at:""
            })
            Notify("成功阅读");
            Dialog({
              title:item.title,
              message:item.content
            });
          }
        })
      }
    }
    return {
      router,state,getStatus,goToApply,readMessage

    }
  }
})
</script>

<style scoped>
.mobile-container {
  padding-top: 30px;
  padding-bottom: 200px;
}
</style>